<template>
  index首页。。。。<br/>
  <h2>测试路由传递参数:</h2>
  <h2>路由就是控制器URL(1、问号 /goods?id=100&goodsName=苹果手机 2、rest:/user/deleteById/id)</h2>

  <h2>router-link会转换成a链接</h2>

  <h3>传递参数:无参数</h3>
  <router-link to="/goods">商品列表:无参数</router-link><br/>
  <h3>问号形式:有参数</h3>
  <router-link to="/query/goods1?id=100&userName=张三&password=123456">query 请求:/query/goods1?id=100&userName=张三&password=123456</router-link><br/>
  <h3>rest形式:有参数</h3>
  <router-link to="/rest/user/100/张三/123456">rest请求:/rest/user2/100/张三/123456</router-link><br/>

  <h3>:to 绑定参数的形式 无参数</h3>
  <!-- 这里用的是路由中的名称 -->
  <router-link :to="{ name: 'goods' }">商品列表:通过name指定地址</router-link><br/>
  <!-- 这里用的是路由中的地址 -->
  <router-link :to="{ path: '/goods' }">商品列表:通过path指定地址</router-link><br/>

  <h3>:to 绑定参数的形式 有参数</h3>
  <!-- 问号形式 -->
  <router-link :to="{ path: '/query/goods1', query: { id: 100,userName:'张三',password:'123456'  } }">query 请求:/query/goods1?id=100&userName=张三&password=123456</router-link><br/>

  <!-- 用法同上 只不过参数增多 rest形式 -->
  <router-link :to="{ name: 'user', params: { id: 100,userName:'张三',password:'123456' } }">rest请求:/rest/user/100/张三/123456</router-link><br/>

  <h3>动态参数 通过:to绑定</h3>
  <!-- 问号形式 -->
  <router-link :to="{ path: '/query/goods1', query: { id: user.id,userName:user.userName,password:user.password  } }">query 请求:/query/goods1?id=100&userName=张三&password=123456</router-link><br/>

  <!-- 用法同上 只不过参数增多 rest形式 -->
  <router-link :to="{ name: 'user', params: { id: user.id,userName:user.userName,password:user.password } }">rest请求:/rest/user/100/张三/123456</router-link><br/>

  <h3>直接写a连接</h3>
  <a href="/query/goods1?id=100&userName=张三&password=123456">query 请求:/query/goods1?id=100&userName=张三&password=123456</a><br/>

  <h3>跳转页面:编程形式</h3>
  <button @click="m1()">无参数</button><br/><br/>
  <button @click="m2()">path无参数</button><br/><br/>
  <button @click="m3()">rest有参数:/rest/user2/100/张三/123456</button><br/><br/>
  <button @click="m4()">问号形式有参数:/query/goods1?id=100&username=张三&password=123456</button><br/><br/>

</template>

<script>
export default {
  name: "index",
  data(){
    return{
      user:{id:100,userName:'张三',password:'123456'}
    }
  },
  methods:{
    login(){
      window.location.href='/' //这里还是可以用的
    },
    m1(){
      //this.$router.push:通过编码形式 跳转路由
      this.$router.push('/goods')
    },
    m2(){
      this.$router.push({ path: '/goods' })
    },
    m3(){
      //rest形式
      this.$router.push({ name: 'user', params: { id: this.user.id,userName:this.user.userName,password:this.user.password } })
    },
    m4(){
      //问号形式
      this.$router.push({ path: '/query/goods1', query: { id: this.user.id,userName:this.user.userName,password:this.user.password  } })
    }
  }
}
</script>

<style scoped>

</style>